<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax 发送 POST 请求</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>

</body>
<script>
    var box = document.querySelector(".box")
    box.addEventListener('mouseover',function(){
        // console.log('test');
        //1.创建对象
        var xhr = new XMLHttpRequest();
        //(方法2):设置响应体数据类型
        xhr.responseType = 'json'

        
        //2.设置请求方法和url
        xhr.open("POST","http://127.0.0.1:8000/server")
        //3.发送请求
        //post是在这里传值,注意下面的格式
        xhr.send('a=300&b=200&c=100')
        //4.设置响应事件处理服务器响应信息
        xhr.onreadystatechange = function(){
            if(this.readyState == 4){
                if(this.status == 200){
                    // box.innerHTML = this.response
                    // console.log(this.response);
                    //虽然用json可以将数据转换成字符串
                    //但是当数据量比较多时,这个字符串就不容易寻找所需数据
                    //方法1:手动对json字符串数据进行转化
                    //将json字符串再转化成对象
                    // let data = JSON.parse(this.response)
                    // console.log(data)
                    // box.innerHTML = data.name

                    //方法2: 设置自动转换
                    console.log(xhr.response);
                }
            }
        }
    })
    box.addEventListener('mouseout',function(){
        box.innerHTML = ''
    })
</script>
</html>